<template>
  <el-form-item :label="label" :prop="prop" :label-width="labelWidth" :required="required" :rules="rules" :error="error" :show-message="showMessage" :inline-message="inlineMessage">
    <el-select v-model="model" :placeholder="placeholder"  :multiple="multiple" :disabled="disabled" :clearable="clearable" :size="size" :filterable="filterable" :remote="remote"  :multiple-limit="multipleLimit" :collapse-tags="collapseTags" :automatic-dropdown="automaticDropdown" :value-key="valueKey" :allow-create="allowCreate" :filter-method	="filterMethod" @change="change" @visible-change="visibleChange" @remove-tag="removeTag" @clear="clear" @blur="blur" @focus="focus" style="width: 100%">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>

  </el-form-item>
</template>

<script>
export default {
  props: {
    value:{
      type:[String,Number,Boolean,Array,Object],
      default:null
    },
    /**
     * el-form-item属性
     */
    label:{
      type:String,
      default:null,
      description:'名字'
    },
    prop:{
      type:String,
      default:null
    },
    labelWidth:{
      type:[Number,String],
      default:null
    },
    rules:{
      type:Object,
      default:null
    },
    error:{
      type:String,
      default:null,
      description:'显示的错误信息'
    },
    showMessage:{
      type:Boolean,
      default:false,
      description:'是否显示校验错误信息'
    },
    required:{
      type:Boolean,
      default:false
    },

    inlineMessage:{
      type:Boolean,
      default:true,
      description:'是否以行内形式展示校验信息'
    },
    size:{
      type:String,
      default:'medium',
      description:'输入框尺寸，只在 type!="textarea" 时有效, 可选值：large, small, mini'
    },
    /**
     * el-form-item属性end
     */
    /**
     * el-select属性start
     */
    disabled:{
      type:Boolean,
      default:false,
      description:'是否禁用'
    },
    clearable:{
      type:Boolean,
      default:false,
      description:'是否可清空'
    },
    placeholder:{
      type:String,
      default:'请选择',
      description:'占位符'
    },
    multiple:{
      type:Boolean,
      default:false,
      description:'是否多选'
    },
    filterable:{
      type:Boolean,
      default:false,
      description:'是否可搜索'
    },
    remote:{
      type:Boolean,
      default:false,
      description:'是否为远程搜索'
    },

    multipleLimit:{
      type:Number,
      default:0,
      description:'多选时用户最多可以选择的项目数，为 0 则不限制'
    },
    collapseTags:{
      type:Boolean,
      default:false,
      description:'多选时是否将选中值按文字的形式展示'
    },
    automaticDropdown:{
      type:Boolean,
      default:false,
      description:'是否将弹层放置在 body 内'
    },
    valueKey:{
      type:String,
      default:'value',
      description:'作为 value 唯一标识的键名，绑定值为对象类型时必填'
    },
    allowCreate:{
      type:Boolean,
      default:false,
      description:'是否允许用户创建新条目，需配合 filterable 使用'
    },
    filterMethod:{
      type:Function,
      default:null,
      description:'自定义搜索方法'
    },



    /**
     * el-select属性end
     */
    /**
     * options属性start
     */
      options:{
        type:Array,
        default:null,
        description:'选项数组'
      }


    /**
     * options属性end
     */

  },
  watch:{
    value:{
      handler(val){
        this.model = val;
      },
      immediate:true
    },
    model(val){
      this.$emit('input',val);
    }
  },
  data() {
    return {
        model:''
    };
  },
  methods: {
    change(val){
      this.$emit('change',val);
    },
    visibleChange(val){
      this.$emit('visible-change',val);
    },
    removeTag(val){
      this.$emit('remove-tag',val);
    },
    clear(val){
      this.$emit('clear',val);
    },
    blur(val){
      this.$emit('blur',val);
    },
    focus(val){
      this.$emit('focus',val);
    }

  },
  mounted: function () {

  }
};
</script>
